<template>
  <div>
    <div>
      <div style="text-align: center">
        <el-tooltip class="item" effect="dark" content="换一下头像呗~" placement="top-start">
          <img v-bind:src="userInfo.avatar"
               class="img-circle" style="width: 60px;height: 60px" @click="editAvatar" alt=""/>
        </el-tooltip>
      </div>
      <ul class="list-group list-group-striped">
        <li class="list-group-item">
          个性签名
          <div class="pull-right">
            {{ userInfo.note }}
            <i class="el-icon-s-promotion"></i>
          </div>
        </li>
        <li class="list-group-item">
          所在城市
          <div class="pull-right">
            {{ userInfo.province + userInfo.city + userInfo.county }}
            <i class="el-icon-map-location"></i>
          </div>
        </li>
        <li class="list-group-item">
          手机号码
          <div class="pull-right">
            {{ userInfo.phone }}
            <i class="el-icon-mobile-phone"></i>
          </div>
        </li>
        <li class="list-group-item">
          邮箱
          <div class="pull-right">
            {{ userInfo.email }}
            <i class="el-icon-c-scale-to-original"></i>
          </div>
        </li>
        <li class="list-group-item">
          昵称
          <div class="pull-right">
            {{ userInfo.nickname }}
            <i class="el-icon-video-pause"></i>
          </div>
        </li>
        <li class="list-group-item">
          历史充值
          <div class="pull-right">
            ￥{{ userInfo.historyAmount }}
            <i class="el-icon-money"></i>
          </div>
        </li>
        <li class="list-group-item">
          账户余额
          <div class="pull-right">
          <span style="color: red;font-weight: bolder">
          ￥{{ Number(userInfo.amount).toFixed(2) }}
        </span>
            <span style="margin-left: 4px">
               <el-tooltip class="item" effect="dark" content="去充值" placement="top-start">
                <i class="el-icon-money top-up" @click="toTopUp"></i>
               </el-tooltip>
          </span>
          </div>
        </li>
        <li class="list-group-item">
          历史积分
          <div class="pull-right">
            {{ userInfo.historyPoint }}
            <i class="el-icon-medal"></i>
          </div>
        </li>
        <li class="list-group-item">
          当前积分
          <div class="pull-right">
            {{ userInfo.point }}
            <i class="el-icon-medal"></i>
          </div>
        </li>
      </ul>

      <el-dialog title="修改头像" v-model="openAvatar" width="238px">
        <el-form>
          <el-form-item>
            <el-upload class="up-img-uploader" :action="imageAction" :show-file-list="false"
                       :on-success="handleUploadSuccess" :headers="headers">
              <img v-if="imageUrl" :src="imageUrl" class="up-img" alt="">
              <i v-else class="el-icon-plus avatar-uploader-icon"/>
            </el-upload>
          </el-form-item>
        </el-form>
        <template #footer>
        <span class="dialog-footer">
          <el-row>
            <el-col :span="12">
              <el-button @click="cancel">取 消</el-button>
            </el-col>
            <el-col :span="12">
              <el-button type="primary" @click="submit">确 定</el-button>
            </el-col>
          </el-row>
        </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { reactive, toRefs, ref, onMounted } from 'vue'
import { getToken } from '../../../utils/auth'
import { ElMessage } from 'element-plus'
import memberApi from '../../../api/member'

export default {
  name: 'info',
  components: {},
  props: {
    userInfo: {
      type: Object
    }
  },
  setup (props, context) {
    console.log(context)
    let store = useStore()
    let router = useRouter()
    let state = reactive({
      // 客户信息
      memberInfo: '',
      openAvatar: false,
      headers: {
        // 上传文件的请求头
        Authorization: 'Bearer ' + getToken()
      },
      imageUrl: null, // 上传图片回显
      // 请求地址
      imageAction: '/api/file/upload',
      form: {}
    })
    let cropperRef = ref(null)
    //------------------ method start

    // 去充值
    const toTopUp = () => {
      router.push('/topUp')
    }
    // 修改头像
    const editAvatar = () => {
      state.openAvatar = true
    }
    // 上传成功
    const handleUploadSuccess = (res, file) => {
      if (res.code === 200) {
        const { url } = res.data
        // ElMessage.success('上传成功')
        console.log(url)
        state.imageUrl = url
        state.form.avatar = url
      }
    }
    // 取消
    const cancel = () => {
      state.openAvatar = false
    }
    // 提交
    const submit = () => {
      memberApi.updateMemberAvatar(state.form).then(res => {
        store.dispatch('GetInfo').then(() => {
          ElMessage.success('修改成功哦~')
          state.imageUrl = null
          state.form = {}
          state.openAvatar = false
        })
      })
    }
    //------------------ method end

    //------------------ 钩子
    onMounted(() => {
    })

    return {
      ...toRefs(state),
      cropperRef,
      toTopUp,
      editAvatar,
      handleUploadSuccess,
      cancel,
      submit
    }
  }
}
</script>

<style scoped lang="scss">
.top-up:hover {
  color: #1890ff;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.up-img-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #000000;
  background-color: #e8e8e8;
  width: 200px;
  height: 200px;
  line-height: 200px;
  text-align: center;
}

.up-img {
  width: 200px;
  height: 200px;
  display: block;
}
</style>
